<template>
  <Head />
  <ShopLayout>


    <!-- Hero 区域 - 移动端优化 -->
    <section class="py-12 sm:py-16 lg:py-20">
      <div class="mx-auto max-w-8xl px-4 sm:px-8 lg:px-24">
        <div class="text-left">
          <h1 class="text-3xl sm:text-4xl lg:text-6xl font-light text-gray-900 leading-tight">
            新鲜科技，<br>
            触手可及。
          </h1>
        </div>
      </div>
    </section>

    <!-- 产品分类展示区域 - 移动端滚动优化 -->
    <section class="py-6 sm:py-8">
      <div class="max-w-6xl px-4 sm:px-8 lg:px-24">
        <!-- 产品分类网格 - 移动端可滚动 -->
        <div class="flex gap-4 sm:gap-6 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 scrollbar-hide">
          <Link 
            v-for="category in mainCategories" 
            :key="category.id"
            :href="route('category.show', category.slug)"
            class="text-center group cursor-pointer flex-shrink-0 w-20 sm:w-24 active:scale-95 transition-transform"
          >
            <div class="mb-2 sm:mb-3">
              <div class="w-16 h-16 sm:w-20 sm:h-20 mx-auto flex items-center justify-center text-3xl sm:text-4xl group-hover:scale-105 transition-transform duration-300">
                {{ category.icon }}
              </div>
            </div>
            <h3 class="text-xs sm:text-sm font-medium text-gray-900">{{ category.name }}</h3>
          </Link>
        </div>
      </div>
    </section>

    <!-- 新品展示区域 - 移动端优化 -->
    <section id="new-products" class="py-6 sm:py-8">
      <div class="mx-auto max-w-8xl px-4 sm:px-8 lg:px-24">
        <!-- 标题区域 -->
        <div class="text-left mb-6 sm:mb-8">
          <h2 class="text-xl sm:text-2xl font-light text-gray-900">
            最新产品，等你来探索。
          </h2>
        </div>

        <!-- 产品展示网格 - 响应式优化：手机1列，平板3列，电脑4列 -->
        <div class="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
          <Link 
            v-for="product in props.newProducts" 
            :key="product.id"
            :href="route('product.show', product.slug)"
            class="bg-white rounded-2xl p-4 sm:p-6 text-center group cursor-pointer hover:shadow-lg active:scale-98 transition-all duration-300 block"
          >
            <h3 class="text-xl sm:text-2xl font-medium text-gray-900 mb-2 sm:mb-3">{{ product.name }}</h3>
            <p class="text-xs sm:text-sm text-gray-500 mb-4 sm:mb-6 line-clamp-2">
              {{ product.short_description }}
            </p>
            <div>
              <img :src="product.image || '/images/product-placeholder.svg'" :alt="product.name" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
            </div>
          </Link>
        </div>
      </div>
    </section>

    <!-- iPhone 区域 -->
    <section id="iphone-products" class="py-8">
      <div class="mx-auto max-w-8xl px-8 sm:px-16 lg:px-24">
        <!-- 标题区域 -->
        <div class="text-left mb-8">
          <h2 class="text-2xl font-light text-gray-900 mb-6">
            Orange Phone。沟通，从未如此鲜活。
          </h2>
        </div>

        <!-- iPhone 产品展示网格 - 响应式优化：手机1列，平板3列，电脑4列 -->
        <div class="grid grid-cols-1 gap-6 md:grid-cols-3 lg:grid-cols-4">
          <Link 
            v-for="product in props.iphoneProducts" 
            :key="product.id"
            :href="route('product.show', product.slug)"
            class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:shadow-lg transition-all duration-300 block"
          >
            <h3 class="text-2xl font-medium text-gray-900 mb-3">{{ product.name }}</h3>
            <p class="text-sm text-gray-500 mb-6 line-clamp-2">
              {{ product.short_description }}
            </p>
            <div>
              <img :src="product.image || '/images/product-placeholder.svg'" :alt="product.name" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300" />
            </div>
          </Link>
        </div>
      </div>
    </section>

    <!-- iPad 区域 -->
    <section id="ipad-products" class="py-8">
      <div class="mx-auto max-w-8xl px-8 sm:px-16 lg:px-24">
        <!-- 标题区域 -->
        <div class="text-left mb-8">
          <h2 class="text-2xl font-light text-gray-900 mb-6">
            Orange Pad。创造力，触手可及。
          </h2>
        </div>

        <!-- iPad 产品展示网格 - 响应式优化：手机1列，平板3列，电脑4列 -->
        <div class="grid grid-cols-1 gap-6 md:grid-cols-3 lg:grid-cols-4">
          <Link 
            v-for="product in props.ipadProducts" 
            :key="product.id"
            :href="route('product.show', product.slug)"
            class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:shadow-lg transition-all duration-300 block"
          >
            <h3 class="text-2xl font-medium text-gray-900 mb-3">{{ product.name }}</h3>
            <p class="text-sm text-gray-500 mb-6 line-clamp-2">
              {{ product.short_description }}
            </p>
            <div>
              <img :src="product.image || '/images/product-placeholder.svg'" :alt="product.name" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300" />
            </div>
          </Link>
        </div>
      </div>
    </section>

    <!-- 配件区域 -->
    <section class="py-8">
      <div class="mx-auto max-w-8xl px-8 sm:px-16 lg:px-24">
        <div class="text-left mb-8">
          <h2 class="text-2xl font-light text-gray-900 mb-6">
            配件。为你的设备锦上添花。
          </h2>
        </div>

        <!-- 配件产品网格 - 响应式优化：手机1列，平板3列，电脑4列 -->
        <div class="grid grid-cols-1 gap-6 md:grid-cols-3 lg:grid-cols-4">
          <Link 
            v-for="product in props.accessories" 
            :key="product.id"
            :href="route('product.show', product.slug)"
            class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:shadow-lg transition-all duration-300 block"
          >
            <h3 class="text-2xl font-medium text-gray-900 mb-3">{{ product.name }}</h3>
            <p class="text-sm text-gray-500 mb-6 line-clamp-2">
              {{ product.short_description }}
            </p>
            <div>
              <img :src="product.image || '/images/product-placeholder.svg'" :alt="product.name" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300" />
            </div>
          </Link>
        </div>
      </div>
    </section>

    <!-- 服务区域 -->
    <section class="py-8">
      <div class="mx-auto max-w-8xl px-8 sm:px-16 lg:px-24">
        <div class="text-left mb-8">
          <h2 class="text-2xl font-light text-gray-900 mb-6">
            Orange Tech 有特色，在此选购有的是理由。
          </h2>
        </div>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <!-- 折抵你的设备，换购新机 -->
          <div class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:scale-105 transition-all duration-300">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-50 rounded-full flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-300">
              <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">折抵你的设备，换购新机</h3>
            <p class="text-sm text-gray-600">享优惠¹。</p>
          </div>

          <!-- 最长可享24个月免息 -->
          <div class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:scale-105 transition-all duration-300">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-50 rounded-full flex items-center justify-center group-hover:bg-green-100 transition-colors duration-300">
              <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">最长可享24个月免息</h3>
            <p class="text-sm text-gray-600">分期²。</p>
          </div>

          <!-- 这一刻，属于你。混搭表情 -->
          <div class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:scale-105 transition-all duration-300">
            <div class="w-16 h-16 mx-auto mb-4 bg-purple-50 rounded-full flex items-center justify-center group-hover:bg-purple-100 transition-colors duration-300">
              <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">这一刻，属于你。混搭表情</h3>
            <p class="text-sm text-gray-600">符号、名字和数字，一起免费刻。</p>
          </div>

          <!-- 部分订单可付费选择 -->
          <div class="bg-white rounded-2xl p-6 text-center group cursor-pointer hover:scale-105 transition-all duration-300">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-50 rounded-full flex items-center justify-center group-hover:bg-green-100 transition-colors duration-300">
              <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">部分订单可付费选择</h3>
            <p class="text-sm text-gray-600">时快送△△，或亲自到店取货。所有订单均可享免费配送。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速链接区域 -->
    <section class="py-8">
      <div class="mx-auto max-w-8xl px-8 sm:px-16 lg:px-24">
        <div class="text-left mb-8">
          <h2 class="text-2xl font-light text-gray-900 mb-6">
            快速链接
          </h2>
        </div>

        <div class="flex flex-wrap gap-6">
          <a href="#" class="text-gray-900 hover:text-gray-700 hover:underline text-sm border border-gray-300 px-4 py-2 rounded-md hover:border-gray-400 transition-colors duration-200">查找零售店</a>
          <a href="#" class="text-gray-900 hover:text-gray-700 hover:underline text-sm border border-gray-300 px-4 py-2 rounded-md hover:border-gray-400 transition-colors duration-200">订单状态</a>
          <a href="#" class="text-gray-900 hover:text-gray-700 hover:underline text-sm border border-gray-300 px-4 py-2 rounded-md hover:border-gray-400 transition-colors duration-200">购买帮助</a>
          <a href="#" class="text-gray-900 hover:text-gray-700 hover:underline text-sm border border-gray-300 px-4 py-2 rounded-md hover:border-gray-400 transition-colors duration-200">退货</a>
          <a href="#" class="text-gray-900 hover:text-gray-700 hover:underline text-sm border border-gray-300 px-4 py-2 rounded-md hover:border-gray-400 transition-colors duration-200">你的收藏</a>
        </div>
      </div>
    </section>


  </ShopLayout>
</template>

<script setup>
import { computed } from 'vue'
import { Head, Link } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'

// Props
const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  featuredProducts: {
    type: Array,
    required: true
  },
  newProducts: {
    type: Array,
    required: true
  },
  iphoneProducts: {
    type: Array,
    required: true
  },
  ipadProducts: {
    type: Array,
    required: true
  },
  accessories: {
    type: Array,
    required: true
  }
})

// 计算属性
const mainCategories = computed(() => {
  return props.categories.filter(category => category.is_featured)
})
</script>